<!-- 手机验证码登录 -->
<template>
	<uv-form :model="ruleForm" :rules="rules" ref="form">
		<uv-form-item class="mb-40" prop="phonenumber" :borderBottom="false">
			<uv-input v-model="ruleForm.phonenumber" border="none" placeholder="请输入手机号">
				<template #prefix>
					<Icon name="phone-fill" size="40rpx" />
				</template>
			</uv-input>
		</uv-form-item>
		
		<uv-form-item class="mb-20 code" prop="passwdorvercode" :borderBottom="false">
			<uv-input v-model="ruleForm.passwdorvercode" border="none" placeholder="请输入验证码" maxlength="6">
				<template #prefix>
					<Icon name="empty-permission" size="40rpx" />
				</template>
				
				<template #suffix>
					<Code class="sendCode" :value="ruleForm.phonenumber" color="#404040" :isFun="true" @onSend="onSend" :type="2" />
				</template>
			</uv-input>
		
		</uv-form-item>
	</uv-form>
</template>

<script setup>
import { reactive, defineExpose, ref, defineEmits } from 'vue'
import Icon from '@/components/Icon/index.vue'
import Code from '@/components/Code/index.vue'
import { valiteMobile } from '@/utils/format'

const emits = defineEmits(['ruleForm'])

const ruleForm = reactive({
	phonenumber: '',
	logintype: 2,
	passwdorvercode : ''
})

const rules = reactive({
	phonenumber: [
		{ required: true, message: '请输入手机号', trigger: ['blur', 'change'] },
		{ 
			validator: (rule, value, callback) => {
				return valiteMobile(value)
			},
			message: '手机格式错误，请重新输入',
			trigger: ['blur', 'change']
		}
	],
	passwdorvercode: [
		{ required: true, message: '请输入验证码', trigger: ['blur', 'change'] }
	]
})

const form = ref(null)

// 发送验证码
const onSend = () => {
	form.value.validateField('phonenumber', err => {
		console.log(err)
	})
}

// 提交
const submit = () => {
	form.value.validate().then(res => {
		emits('ruleForm', ruleForm)
	}).catch(err => {
		
	})
}

defineExpose({
	submit
})
</script>

<style lang="scss" scoped>
@import '@/static/scss/form.scss';
</style>